<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" charset="utf-8">
	mui.init({
		subpages:[{
		url:"order.html",//子页面HTML地址，支持本地地址和网络地址
		id:"order.html",//子页面标志
		styles:{
			top:"25px",//子页面顶部位置
			bottom:"50px",//子页面底部位置
		},
		extras:{}//额外扩展参数
		},
		{
		url:"discover.html",//子页面HTML地址，支持本地地址和网络地址
		id:"discover.html",//子页面标志
		styles:{
			top:"25px",//子页面顶部位置
			bottom:"50px",//子页面底部位置
		},
		extras:{}//额外扩展参数
		},
		{
			url:"canteen.html",//子页面HTML地址，支持本地地址和网络地址
			id:"canteen.html",//子页面标志
			styles:{
			top:"25px",//子页面顶部位置
			bottom:"50px",//子页面底部位置
		},
		extras:{}//额外扩展参数
		},
		{
			url:"home.html",//子页面HTML地址，支持本地地址和网络地址
			id:"home.html",//子页面标志
			styles:{
				top:"25px",//子页面顶部位置
				bottom:"50px",//子页面底部位置
		},
		extras:{}//额外扩展参数
	}]
});

	function subView(id){
		plus.webview.getWebviewById(id).show();
	}
mui.plusReady(function(){
	//plus.navigator.setStatusBarStyle('light');
	document.getElementById("order").addEventListener("tap",function(){
		subView("order.html");
	});
	document.getElementById("home").addEventListener("tap",function(){
		subView("home.html");
	});
	document.getElementById("canteen").addEventListener("tap",function(){
		subView("canteen.html");
	});
	document.getElementById("discover").addEventListener("tap",function(){
		subView("discover.html");
	});
	
});	
</script>
</head>
<body>
	
<header class="mui-bar mui-bar-nav" style="background-color: #EC971F;">
	
</header>

<nav class="mui-bar mui-bar-tab">
	<a class="mui-tab-item mui-active" id="home">
		<span class="mui-icon mui-icon-home"></span>
		<span class="mui-tab-label">首页</span>
	</a>
	<a class="mui-tab-item" id="canteen">
		<span class="mui-icon mui-icon-checkbox"></span>
		<span class="mui-tab-label">食堂</span>
	</a>
	<a class="mui-tab-item" id="discover">
		<span class="mui-icon mui-icon-flag"></span>
		<span class="mui-tab-label">周边</span>
	</a>
	<a class="mui-tab-item" id="order">
		<span class="mui-icon mui-icon-person"></span>
		<span class="mui-tab-label">订单</span>
	</a>
</nav>

<!-- CONTENT -->

<script type="text/javascript">

</script>
</body>
</html>